<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue之过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>计算属性实现:{{ftlDate}}</h2>
        <h3>通过函数进行实现{{formatDate(date)}}</h3>
        <h1>过滤器实现:{{date | getDate | getYear}}</h1>
    </div>


<!--
        过滤器:
            定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
            语法:
                1.注册过滤器:Vue.filter(name,callback) （全局的过滤器）
                    或 new Vue{filters:{}} （局部的过滤器）
                2.使用过滤器:
                    {{xxx | 过滤器名}}
                   或者 v-bind:属性 =“xxx | 过滤器名"
            备注:
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据，是产生新的对应的数据

-->
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                date: new Date().getTime()
            },
            computed:{
                ftlDate() {
                    return dayjs(this.date).format("YYYY-MM")
                }
            },
            methods:{
                formatDate(date) {
                    return dayjs(date).format("MM-DD")
                }
            },
            filters:{
                getDate() {
                    return dayjs(this.date).format("YYYY-MM-DD")
                },
                getYear(){
                    return dayjs(this.date).format("DD")
                }
            }
        })

    </script>
</html>